<!-- 用户主页 -->
<template>
	<view>
		<page-meta :page-style="pageStyle" />
		
		<!-- ↓ 自定义导航 -->
		<musichead title="设置" :back="false" :filter="false" :bg="true" />
		
		<!-- ↓ 播放器 -->
		<ThePlayerBottomBar />
		
		<view class="setting-wrap fixed-top fixed-bottom">
		  <!-- 设置列表 -->
		  <view class="setting-list">
		    <view class="setting-list-item">
		      <view class="setting-list-item-title">夜间模式</view>
		      <switch
		        class="setting-switch-btn"
		        color="#D1403C"
		        @change="themeChange"
		        :checked="themeDark"
		      />
		    </view>
		    <view class="setting-list-item">
		      <view class="setting-list-item-title">青少年模式</view>
		      <switch class="setting-switch-btn" color="#D1403C" />
		    </view>
		    <view class="setting-list-item" @tap="toSettingHome">
		      <view class="setting-list-item-title">本地音乐</view>
		    </view>
		  </view>
		
		  <!-- 退出登录 -->
		  <view class="setting-login">
		    <view v-if="loginStatus" class="setting-exit-btn" @tap="exit">退出登录</view>
		    <view v-else class="setting-login-btn" @tap="login">未登录</view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{
					
				}
			};
		},
		computed:{
			pageStyle() {
				return this.$store.getters['theme/getPageMetaStyle'];
			},
			themeDark(){
				return this.$store.state.theme.themeConfig.theme === 'dark'
			},
			
			//登录状态
			loginStatus(){
				return false
			}
		},
		onShow(){
			//重进后page-meta失效 清除缓存 才行
			this.$store.dispatch('theme/setTheme','raw');
		},
		
		methods:{
			//切换主题
			themeChange(e) {
			  if (e.detail.value) { 
				  this.$store.dispatch('theme/setTheme','dark');
			  } else {
				  this.$store.dispatch('theme/setTheme','light');
			  }
			},
			
			// 退出登录
			exit() {
			  userStore.$reset()
			  uni.removeStorage({
			    key: 'cookie',
			    success: function (res) {
			      setTimeout(() => uni.reLaunch({ url: `./user` }), 0)
			    }
			  })
			},
			
			// 前往登录
			login() {
			  uni.switchTab({ url: './user' })
			},
			
			// 前往自定义主页
			toSettingHome() {
			  uni.navigateTo({ url: '../customize/home' })
			}
		}
	}
</script>

<style lang="scss" scoped>
.setting-wrap {
  width: 100%;
  min-height: calc(100vh - var(--window-bottom));
  box-sizing: border-box;
  position: relative;

  .setting-list {
    overflow: hidden;
    margin: 32rpx;
    background-color: var(--theme-background-color-card);
    border-radius: 12rpx;

    .setting-list-item {
      width: 100%;
      height: 96rpx;
      padding: 0 32rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--theme-text-title-color);

      .setting-switch-btn {
        transform: scale(0.8);
      }
    }
  }

  .setting-login {
    width: 100%;
    height: 96rpx;
    padding: 0 32rpx;
    box-sizing: border-box;

    .setting-login-btn,
    .setting-exit-btn {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12rpx;
    }

    .setting-login-btn {
      color: var(--theme-text-title-color);
      background-color: var(--theme-background-color-card);
    }

    .setting-exit-btn {
      color: #fff;
      background-color: var(--theme-color);
    }
  }
}
</style>
